<template>
  <div>
    <el-page-header @back="goBack" content="个人中心">
    </el-page-header>
    <div class="container">
      <div class="person-box">
        <!-- 左边布局 -->
        <div class="left-box">
          <img :src="user.user_head" alt="头像" class="avatar">
          <p class="nickname">{{ user.nickname }}</p>
          <p class="signature">{{ user.remark }}</p>
        </div>
        <div class="mid-box">
          <!-- 中间布局 -->
          <p><strong>性别:</strong> {{ formattedGender }}</p>
          <p><strong>年龄:</strong> {{ user.user_age }}</p>
          <p><strong>电话:</strong> {{ user.mobile }}</p>
          <p><strong>账号状态:</strong> {{ user.status_id === 1 ? '正常' : '禁用' }}</p>
          <p>
            <button @click="editMode = true">编辑个人信息</button>
          </p>
          <!-- 右边布局 -->
        </div>
        <div class="right-box">
          <p><strong>星座:</strong> {{ user.constellation }}</p>
          <p><strong>职业:</strong> {{ user.occupation }}</p>
          <p><strong>邮箱:</strong> {{ user.email }}</p>
          <p><strong>现居地址:</strong> {{ user.address }}</p>
          <p>
            <button @click="goToChange">修改密码</button>
          </p>
        </div>
      </div>
      <div v-if="editMode" class="edit-modal">
        <div class="modal-content">
          <h2>编辑个人信息</h2>
          <el-upload class="avatar-uploader" :action="getUploadUrl()" :show-file-list="false"
                     :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="user.user_head" :src="user.user_head" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <form @submit.prevent="saveChanges">
            <!-- 编辑个人信息 -->
            <label>昵称:
              <input type="text" v-model="user.nickname">
            </label><br><br>
            <label>性别:
              <select v-model="user.user_sex">
                <option value="1">男</option>
                <option value="2">女</option>
                <option value="3">保密</option>
              </select>
            </label><br><br>
            <label>年龄:
              <input type="number" v-model.number="user.user_age">
            </label><br><br>
            <label>联系电话:
              <input type="text" v-model="user.mobile">
            </label><br><br>
            <label>星座：
              <input type="text" v-model="user.constellation">
            </label><br><br>
            <label>职业：
              <input type="text" v-model="user.occupation">
            </label><br><br>
            <label>邮箱：
              <input type="text" v-model="user.email">
            </label><br><br>
            <label>地址：
              <input type="text" v-model="user.address">
            </label><br><br>
            <label>密保问题：你最喜欢食物是什么？
              <br>
              <input type="text" v-model="user.secret_answer">
            </label><br><br>
            <label>个性签名:
              <input type="text" v-model="user.remark">
            </label><br><br>
            <button type="submit">保存</button>
            <button type="button" @click="cancelEdit">取消</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';


export default {
  data() {
    return {
      
      user: {
        nickname: '',
        user_sex: '',
        user_age: '',
        user_head: '',
        mobile: '',
        secret_answer: '',
        remark: '',
        status_id: '',
        constellation: '',
        occupation: '',
        email: '',
        address: ''
      },
      editMode: false,
      error: null,
      username: ''
    };
  },
  computed: {
    formattedGender() {
      if (this.user.user_sex === 1) return '男';
      if (this.user.user_sex === 2) return '女';
      return '保密';
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    goToChange() {
      this.$router.replace('/ChangePwd');
    },

    saveChanges() {
      if (this.user.user_age <= 0 || this.user.user_age >= 200) {
        this.$toast('请重新输入年龄');
        return;
      }
      axios.post('http://localhost:8081/springboot01/user/change',
          {
            username: this.username,
            nickname: this.user.nickname,
            user_sex: this.user.user_sex,
            user_age: this.user.user_age,
            user_head: this.user.user_head,
            mobile: this.user.mobile,
            secret_answer: this.user.secret_answer,
            remark: this.user.remark,
            status_id: this.user.status_id,
            occupation: this.user.occupation,
            constellation: this.user.constellation,
            email: this.user.email,
            address: this.user.address
          },
          {
            headers: {
              'Content-Type': 'application/json'
            }
          }
      )
          .then(response => {
            console.log('Response data:', response.data);
            alert(response.data.msg);
            this.editMode = false;

          })
          .catch(error => {
            console.error('Error saving changes:', error);
            this.error = error.response.data.message;
          });
    },

    cancelEdit() {
      this.editMode = false;
      const userJson = localStorage.getItem("user") || "";
      if (!userJson) {
        alert("请求失败，请重新登录");
      } else {
        const userData = JSON.parse(userJson);
        this.username = userData.username;
      }
      axios.post(
          "http://localhost:8081/springboot01/user/getPerson",
          {
            username: this.username,
          },
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
      )
          .then((response) => {
            if (response.data.msg === "请求成功!") {
              this.username = response.data.data.username;
              this.user.nickname = response.data.data.nickname;
              this.user.user_sex = response.data.data.user_sex;
              this.user.mobile = response.data.data.mobile;
              this.user.user_age = response.data.data.user_age;
              this.user.user_head = response.data.data.user_head;
              this.user.remark = response.data.data.remark;
              this.user.secret_tip = response.data.data.secret_tip;
              this.user.secret_answer = response.data.data.secret_answer;
              this.user.status_id = response.data.data.status_id;
              this.user.constellation = response.data.data.constellation;
              this.user.occupation = response.data.data.occupation;
              this.user.email = response.data.data.email;
              this.user.address = response.data.data.address;
            } else {
              alert(response.data.msg);
            }
          })
          .catch((error) => {
            console.error("请求失败", error);
            this.error = "请求失败";
          });
             
    },
    getUploadUrl() {
      return `http://localhost:8081/springboot01/user/head?username=${this.username}`;
    },
    handleAvatarSuccess(response){
this.user.user_head=response.data;
this.$toast("上传成功")
    },
    getform() {
      const userJson = localStorage.getItem("user") || "";
      if (!userJson) {
        alert("请求失败，请重新登录");
      } else {
        const userData = JSON.parse(userJson);
        this.username = userData.username;
      }
      axios.post(
          "http://localhost:8081/springboot01/user/getPerson",
          {
            username: this.username,
          },
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
      )
          .then((response) => {
            if (response.data.msg === "请求成功!") {
              this.username = response.data.data.username;
              this.user.nickname = response.data.data.nickname;
              this.user.user_sex = response.data.data.user_sex;
              this.user.mobile = response.data.data.mobile;
              this.user.user_age = response.data.data.user_age;
              this.user.user_head = response.data.data.user_head;
              this.user.remark = response.data.data.remark;
              this.user.secret_tip = response.data.data.secret_tip;
              this.user.secret_answer = response.data.data.secret_answer;
              this.user.status_id = response.data.data.status_id;
              this.user.constellation = response.data.data.constellation;
              this.user.occupation = response.data.data.occupation;
              this.user.email = response.data.data.email;
              this.user.address = response.data.data.address;
            } else {
              alert(response.data.msg);
            }
          })
          .catch((error) => {
            console.error("请求失败", error);
            this.error = "请求失败";
          });
    }
  },


  mounted() {
    this.getform();


  },
};
</script>


<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  border: white;
  width: 2000;
}

.person-box {
  display: flex;
  justify-content: space-between; /* 确保盒子均匀分布 */
  border: 1px solid #ccc;
  padding: 20px;
  height: 400px;
  width: 2000px; /* 根据需要调整宽度 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  align-items: center;
}

.left-box {
  flex: 1; /* 每个盒子平均占据空间 */
  width: 300px;
  text-align: center;
}
.mid-box {
  flex: 1; /* 每个盒子平均占据空间 */
  padding: 10px;
  font-size: 1.2em;
  width: 250px;
}
.right-box {
  flex: 1; /* 每个盒子平均占据空间 */
  padding: 10px;
  font-size: 1.2em;
  width: 250px;
}
.right-box p {
  margin-bottom: 0.7em;
}
.mid-box p {
  margin-bottom: 0.7em;
}


.avatar {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.nickname {
  font-size: 24px;
  font-weight: bold;

}

.signature {
  font-style: italic;
}

.edit-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-size: 10px;
  background-color: #333333;
}
button {
  width: 6rem;
  height: 2.25rem;
  background-color: #ff9bad;
  color: white;
  border: none;
  border-radius: 3rem;
  font-size: 0.8em;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

button:hover {
  color: #ff9bad;
}

button:after {
  content: "";
  background: white;
  position: absolute;
  z-index: -1;
  left: -20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skew(-45deg) scale(0, 1);
  transition: all 0.5s;
}

button:hover:after {
  transform: skew(-45deg) scale(1, 1);
}

.edit-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; 
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  z-index: 1001; 
}

</style>
  